<template>
  <div class="deblurring my-scrollbar">
    <a-checkbox-group v-model:value="checkedList">
      <ul class="card-list">
        <li v-for="item in dataList" :key="item.id" class="card-list-item">
          <data-card
            :title="item.dataName"
            :size="item.size"
            :value="item.id"
            :url="item.reviewUrl"
            :source-url="item.url"
            :resolution="`${item?.width}*${item?.length}`"
          />
        </li>
      </ul>
    </a-checkbox-group>
    <my-infinite-loading :empty="dataList.length === 0" :identifier="identifier" @infinite="loadData">
      <template #empty>
        <default-graph style="margin-top: 200px">
          <img src="@/assets/img/empty-img-simple.svg" />
          <template #title>
            <p class="default-graph-title">无模糊内容</p>
          </template>
        </default-graph>
      </template>
    </my-infinite-loading>
  </div>

  <checkbox-control v-if="checkPermissions(detailInfo?.createType, detailInfo?.readOnly)" v-model:checked-list="checkedList">
    <template #control>
      <a-button :loading="loading" @click="batchDeletion">批量删除</a-button>
    </template>
  </checkbox-control>
</template>

<script setup lang="ts">
  import { message, Modal } from 'ant-design-vue'
  import { createVNode, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import WarnIcon from '@/components/icon/IconWarning/index.vue'
  import { dataCleaningApi } from '@/services/api'
  import { checkPermissions } from '@/utils/share'

  import DataCard from './DataCard.vue'

  export interface DeblurringProps {
    detailInfo?: any
  }
  withDefaults(defineProps<DeblurringProps>(), {
    detailInfo: {}
  })

  const emits = defineEmits<{
    (e: 'updateData'): void
  }>()

  const route = useRoute()
  const parentParams = route.params as any

  const identifier = ref<number>(1)
  const checkedList = ref<string[]>([])
  const dataList = ref<any[]>([])

  const pageForm = ref({
    taskId: parentParams.id,
    limit: 42,
    offset: 1
  })

  // 底部滚动
  const loadData = async ($state: any) => {
    try {
      let {
        data: { records }
      } = await dataCleaningApi.dimTaskResult(pageForm.value)
      records = records || []
      if (records.length < pageForm.value.limit) {
        $state.complete()
      } else {
        pageForm.value.offset++
        $state.loaded()
      }
      const idList: string[] = records.map((item: any) => item.id)
      checkedList.value = checkedList.value.concat(idList)
      dataList.value = dataList.value.concat(records)
    } catch (error) {
      $state.error()
    }
  }

  /* 批量删除 */
  const { loading, runAsync: runBatchDel } = useRequest(dataCleaningApi.detailBatchDel)
  const batchDeletion = async () => {
    Modal.confirm({
      title: `确定删除?`,
      icon: createVNode(WarnIcon),
      content: '所选数据将被删除，且不可恢复，请确认操作',
      okText: '确定',
      cancelText: '取消',
      centered: true,
      onOk: async () => {
        await runBatchDel({}, { data: checkedList.value })
        checkedList.value = []
        dataList.value = []
        pageForm.value.offset = 1
        identifier.value++
        message.success('删除成功')
        emits('updateData')
      }
    })
  }
</script>

<style lang="less" scoped>
  .deblurring {
    overflow: hidden auto;
    padding: 0 24px;
    width: 100%;
    height: 591px;
    border-radius: 10px;

    .card-list {
      display: grid;
      margin-top: 8px;
      grid-template-columns: repeat(6, 154px);
      gap: 8px 8px;

      .card-list-item {
        height: 115px;
      }
    }
  }
</style>
